<template>
	<view>
		<!-- 弹框——带关闭 -->
		<view :class="['popout flex',isPopout?animation:animation+'-close',]"  >
            <view class="mask2"  @touchmove.stop.prevent=""></view>
            <view class="body">
                <view class="cont" :style="{'padding':Padding}"  @touchmove.stop.prevent="">
					<slot name="content"></slot>
					<view class="btn" @click="close" v-if="type==1" >知道了</view>
				</view>
				<image @click="close" class="i-close" src="/static/img/icon/btn-close.png" v-if="type==0"></image>
            </view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isPopout:false,
				isSkewout:false
			};
		},
		props:{
			padding:[String,Number],
			type:{
				type:[String,Number],
				default:1
			},
			animation:{
				type:String,
				default:'fade'
			}
		
		},
		computed:{
			Padding(){
				return this.padding
			}
		},
		methods:{
			close(){
				// if(this.animation=='fade'){
				// 	this.isPopout=false;
				// }else if(this.animation=='skew'){
				// 	this.isSkewout = false
				// }
				this.isPopout=false;
				uni.showTabBar()
				this.$emit('Click')
			},
			show(){
				this.isPopout=true;
				// if(this.animation=='fade'){
				// 	this.isPopout=true;
				// }else if(this.animation=='skew'){
				// 	this.isSkewout = true
				// }
				uni.hideTabBar()
			}
		},
		// watch:{
		// 	isPopout(newValue,oldValue){
		// 		this.isPopout=newValue
		// 	}
		// }
	}
</script>

<style lang="scss" scoped="">
	.popout.fade{
		opacity: 1;z-index: 10000;
	}
	.popout.fade-close{
		 opacity: 0; 
	}
	.popout.skew{
		opacity: 1;
		z-index: 10000;
	}
	.popout.skew .body{
		// transform:translate3d(0, 0, 0) scale3d(1,1,1);
		animation: anim-open-scale .35s cubic-bezier(0.7,0,0.3,1);
	}
	.popout.skew-close {
		opacity: 0;
	}
	.popout.skew-close .body{
		// transform:translate3d(150px, -200px, 0) scale3d(0.5,1.4,1);
		// transition:all .6s cubic-bezier(0.7,0,0.3,1);
		animation: anim-close-scale .35s cubic-bezier(0.7,0,0.3,1);
	}
	
	.popout{
		position: fixed; z-index: -1;transition: all .3s linear;
		left: 0; right: 0; top: 0; bottom: 0;
		align-items: center; justify-content: center;
		.body{position: relative;
			z-index: 10;}
		.cont{
			width:560upx;
			min-height: 200upx;
			background: #fff;
			border-radius: 16upx;
			padding:0 20upx 30upx;
		}
		.i-close{
			  display: block;
			  width:68upx;
			  height: 68upx;
			  // margin: 50upx auto 0;
			  position: absolute;
			  left: 50%;
			  margin-left:-34upx;
			  bottom: -56px;
			  image{
				  width:68upx;
				  height: 68upx;
			  }
		}
		.btn{width: 320upx;height: 60upx;border-radius: 30upx;line-height: 60upx;background:$maincolor;color: #fff;text-align: center;margin: 0 auto;margin-top:30upx; font-size: 28upx;}
	}
	.mask2{
		position: absolute;
		top: 0;
		left: 0;
		bottom: 0;
		right: 0;
		background: rgba(0,0,0,.5);
		z-index: 9;
	}
	@keyframes anim-open-scale {
	    0% {
	        opacity: 0;
	        transform: translate3d(280upx, -560upx, 0) scale3d(.3, 1.8, 1);
	    }
	
	    100% {
	        opacity: 1;
	        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	    }
	}
	@keyframes anim-close-scale {
	    0% {
	        opacity: 1;
	        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	    }
	
	    20% {
	        opacity: 1;
	        transform: translate3d(0, 0, 0) scale3d(1, 1, 1);
	    }
	
	    100% {
	        opacity: 0;
	        transform: translate3d(280upx, -560upx, 0) scale3d(.3, 1.8, 1) ;
	    }
	}
	 @keyframes dialogOpen {
	    0% {
	        -webkit-transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.7, 0, 0, 0, 0, .7, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        opacity: 0
	    }
	    3.4% {
	        -webkit-transform: matrix3d(.795, 0, 0, 0, 0, .822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.795, 0, 0, 0, 0, .822, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    4.7% {
	        -webkit-transform: matrix3d(.835, 0, 0, 0, 0, .88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.835, 0, 0, 0, 0, .88, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    6.81% {
	        -webkit-transform: matrix3d(.898, 0, 0, 0, 0, .968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.898, 0, 0, 0, 0, .968, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    9.41% {
	        -webkit-transform: matrix3d(.965, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.965, 0, 0, 0, 0, 1.05, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    10.21% {
	        -webkit-transform: matrix3d(.982, 0, 0, 0, 0, 1.068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.982, 0, 0, 0, 0, 1.068, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    13.61% {
	        -webkit-transform: matrix3d(1.037, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.037, 0, 0, 0, 0, 1.1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    14.11% {
	        -webkit-transform: matrix3d(1.042, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.042, 0, 0, 0, 0, 1.099, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    17.52% {
	        -webkit-transform: matrix3d(1.062, 0, 0, 0, 0, 1.072, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.062, 0, 0, 0, 0, 1.072, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    18.72% {
	        -webkit-transform: matrix3d(1.064, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.064, 0, 0, 0, 0, 1.056, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    21.32% {
	        -webkit-transform: matrix3d(1.059, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.059, 0, 0, 0, 0, 1.021, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    24.32% {
	        -webkit-transform: matrix3d(1.045, 0, 0, 0, 0, .988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.045, 0, 0, 0, 0, .988, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    25.23% {
	        -webkit-transform: matrix3d(1.04, 0, 0, 0, 0, .981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.04, 0, 0, 0, 0, .981, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    29.03% {
	        -webkit-transform: matrix3d(1.019, 0, 0, 0, 0, .969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.019, 0, 0, 0, 0, .969, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    29.93% {
	        -webkit-transform: matrix3d(1.014, 0, 0, 0, 0, .97, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.014, 0, 0, 0, 0, .97, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    35.54% {
	        -webkit-transform: matrix3d(.994, 0, 0, 0, 0, .989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.994, 0, 0, 0, 0, .989, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    36.74% {
	        -webkit-transform: matrix3d(.991, 0, 0, 0, 0, .994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.991, 0, 0, 0, 0, .994, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    41.04% {
	        -webkit-transform: matrix3d(.988, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.988, 0, 0, 0, 0, 1.007, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    44.44% {
	        -webkit-transform: matrix3d(.99, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.99, 0, 0, 0, 0, 1.01, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    52.15% {
	        -webkit-transform: matrix3d(.997, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(.997, 0, 0, 0, 0, 1.002, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        opacity: 1
	    }
	    59.86% {
	        -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.002, 0, 0, 0, 0, .997, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    63.26% {
	        -webkit-transform: matrix3d(1.002, 0, 0, 0, 0, .998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1.002, 0, 0, 0, 0, .998, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    75.28% {
	        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1, 0, 0, 0, 0, 1.001, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    85.49%,
	    90.69%,
	    100% {
	        -webkit-transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1);
	        transform: matrix3d(1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1, 0, 0, 0, 0, 1)
	    }
	    100% {
	        opacity: 1
	    }
	}
	
</style>
